<template>
  <div class="player-min">
    <div @click="changeMusic" :style="{backgroundImage: `url(${player.image})`}" ref="musicImage"></div>
    <div>
      <div><span>{{ player.title }}</span></div>
      <div><span>{{ player.artist }}</span></div>
    </div>
    <div>
      <div><input id="progressBar" ref="progressBar" type="range" step="1"
                  min="0"
                  :max=player.duration
                  v-model=player.currentTime
                  :style="schedule"
                  @mousedown="suspend"
                  @mouseup="adjust"
      />
        <!--        :style="{backgroundSize:progressBarStyle.backgroundSize}"-->
      </div>
      <div v-show="player.isPlay || player.currentTime > 0">
        <span>{{ progress }}</span>
        <span>{{ max }}</span>
      </div>
    </div>
    <div>
      <div @click="playStart">
        <svg class="icon" aria-hidden="true">
          <use v-if="player.playStart===0" xlink:href="#icon-xunhuanbofang"></use>
          <use v-else-if="player.playStart===1" xlink:href="#icon-danquxunhuan"></use>
          <use v-else-if="player.playStart===2" xlink:href="#icon-suijibofang"></use>
        </svg>
      </div>
      <div @click="last">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-bofangqi-xiayiji"></use>
        </svg>
      </div>
      <div @click="play">
        <svg class="icon" aria-hidden="true">
          <use v-show="player.isPlay" xlink:href="#icon-bofangqi-zanting"></use>
          <use v-show="!player.isPlay" xlink:href="#icon-bofangqi-bofang"></use>
        </svg>
      </div>
      <div @click="next">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-bofangqi-xiayiji"></use>
        </svg>
      </div>
      <div @click="list">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-guanlishipin"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import {ref, reactive, computed, onMounted, getCurrentInstance, onBeforeUnmount, inject} from "vue";
import {useStore} from "vuex";
import {secondToMinute} from "@/util/utilString";

export default {
  name: 'PlayerMin',
  description: {
    // 音乐播放器
  },
  setup(props, context) {
    const store = useStore();
    // 默认背景图片
    const BACKGROUND_IMAGE = "./resources/static/music.svg";
    const music = getCurrentInstance().appContext.config.globalProperties.$music;

    const progressBar = ref(null);
    const musicImage = ref(null);
    // 项目路径
    const publicPath = process.env.BASE_URL;
    // 计时器
    let timer = null;

    let isInit = true;

    let player = reactive({
      // 是否在播放
      isPlay: false,
      // 播放状态
      playStartList: ['循环播放', '单曲循环', '随机播放'],
      playStart: 0,
      // 图片转动速度
      imageSpeed: 1,
      // 初始时长
      initTime: 0,
      // 当前播放进度
      currentTime: 0,
      // 播放总时长
      duration: 0,
      // 浏览器缓存
      cache: 0,
      // 默认名称
      name: '',
      // 默认标题
      title: '未知歌名',
      // 默认歌手
      artist: '未知歌手',
      // 默认专辑
      album: '未知专辑',
      // 默认路径
      url: '',
      // 默认封面
      image: BACKGROUND_IMAGE,
    });

    function openTimer() {
      timer = setInterval(() => {
        //console.log("min进程在播放")
        //Object.assign(player, music.player);
        if (isInit) {
          isInit = false;
          player.imageSpeed = 0;
          musicImage.value.style.transform = 'rotate(' + player.imageSpeed + 'deg)';
          player.isPlay = music.player.isPlay;
          player.name = music.player.name;
          player.title = music.player.title;
          player.artist = music.player.artist;
          player.album = music.player.album;
          player.image = music.player.image;
          player.url = music.player.url;
          player.currentTime = music.player.currentTime;
          player.duration = music.player.duration;
        }
        if (player.duration <= player.currentTime || player.url !== music.player.url) {
          isInit = true;
          return;
        }
        if (player.currentTime > 0) {
          player.imageSpeed++;
          musicImage.value.style.transform = 'rotate(' + player.imageSpeed + 'deg)';
        }
        player.isPlay = music.player.isPlay;
        player.playStart = music.player.playStart;
        player.currentTime = music.player.currentTime;
        player.duration = music.player.duration;
        player.cache = music.player.cache;
      }, 101)
    }

    function play() {
      let playPause = music.playPause();
      if (playPause === 1) {
        openTimer();
      } else if (playPause === 2) {
        clearInterval(timer);
      } else {
        console.log("失败！")
      }
    }

    // 更改音乐封面
    function changeMusic() {

    }

    // 暂停音乐播放器
    function suspend() {
      music.suspend();
      clearInterval(timer);
    }

    // 调整音乐播放器
    function adjust() {
      music.adjust(player.currentTime);
      openTimer()
    }

    // 调整播放循环
    function playStart() {
      if (player.playStart < 2) {
        player.playStart++;
        music.player.playStart = player.playStart;
      } else {
        player.playStart = 0
        music.player.playStart = 0;
      }
    }

    // 上一曲
    function last() {
      music.last();
    }

    // 下一曲
    function next() {
      music.next();
    }

    // 播放列表
    const setPlayListShow = inject('setPlayListShow');

    function list() {
      setPlayListShow();
    }

    let max = computed(() => {
      return secondToMinute(player.duration)
    })

    let progress = computed(() => {
      return secondToMinute(player.currentTime)
    })

    let schedule = computed(() => {
      let schedule1 = 0
      let schedule2 = 0
      if (player.duration && player.duration > 0) {
        schedule1 = Math.floor(player.currentTime / player.duration * 10000) / 100.00
        schedule2 = Math.floor(player.cache / player.duration * 10000) / 100.00
      }
      // console.log("schedule1 = " + schedule1, "schedule2 = " + schedule2);
      return {
        '--schedule1': schedule1 + '%',
        '--schedule2': schedule2 + '%'
      }
    })

    onMounted(() => {
      openTimer();
      /*store.dispatch(
          'playerMin/getMusicInfoStore',
          './public/resources/static/download/music/陈洁丽 _ 李培斌 - 尘曦.mp3'
      )*/
    })
    onBeforeUnmount(() => {
      clearInterval(timer);
    })
    return {
      progressBar,
      musicImage,
      player,
      schedule,
      progress,
      max,
      play,
      last,
      next,
      list,
      playStart,
      changeMusic,
      suspend,
      adjust
    }
  },
}
</script>

<style scoped lang="less">
@import url("@/assets/less/1.less");

.player-min {
  width: 240px;
  height: 450px;
  padding: 25px;
  background-color: @fc;
  border-radius: 38px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;

  /*div {
    width: 293px;
    height: 500px;
    background-color: @fc;
    border-radius: 38px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;*/

  & > div:nth-child(1) {
    width: 240px;
    height: 240px;
    background-size: 240px;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: none;
    overflow: hidden;
    transition: transform .1s;
  }

  & > div:nth-child(2) {
    text-align: center;
    //.text(20em);
    & > div:nth-child(1) {
      color: @fcc;
      .text(200px);
    }

    & > div:nth-child(2) {
      margin-top: 5px;
      color: @fbc;
      .text(200px);
    }
  }

  & > div:nth-child(3) {
    width: 240px;
    height: 26px;

    & > div:nth-child(1) {
      input[type=range] {

        -webkit-appearance: none;
        outline: none;
        width: 240px;
        background-color: @fcc;
        // 这个属性设置使填充进度条时的图形为圆角
        border-radius: 10px;

        &:focus {
          outline: none;
        }

        // 进度条样式
        &::-webkit-slider-runnable-track {
          height: 8px;
          // 将轨道设为圆角的
          border-radius: 10px;
          // 背景颜色，俩个颜色分别对应上下，自己尝试下就知道了嗯
          //background: -webkit-linear-gradient(#D75E56, #D75E56) no-repeat, #d61d1d;
          background: -webkit-linear-gradient(#D75E56, #D75E56) no-repeat,
          -webkit-linear-gradient(rgba(82, 87, 98, .3), rgba(82, 87, 98, .3)) no-repeat;
          // 设置左右宽度比例
          //background-size: 0 100%, 0 100%;
          background-size: var(--schedule1) 100%, var(--schedule2) 100%;
          // 轨道内置阴影效果
          /*box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;*/

          /*&::after {
            content: "1111";
            background: -webkit-linear-gradient(#1eb9ac, #1eb9ac) no-repeat, #29920e;
          }*/
        }

        // 拖动块的样式
        &::-webkit-slider-thumb {
          -webkit-appearance: none;
          // 使滑块超出轨道部分的偏移量相等
          margin-top: -6px;
          height: 20px;
          width: 20px;
          background-color: #D75E56;
          border: solid 4px @fcc;
          // 外观设置为圆形
          border-radius: 50%;
          //添加底部阴影
          /*box-shadow: 0 .125em .125em #3b4547;*/
          transition: all 300ms cubic-bezier(.02, .01, .47, 1);

          &:hover {
            //transform: translate(0, -7px);
            transform: scale(1.3, 1.3);
            transition-delay: 0s;
          }
        }
      }
    }

    & > div:nth-child(2) {
      display: flex;
      flex-direction: row;
      /*flex-wrap: wrap;*/
      justify-content: space-between;
      align-items: center;

      span {
        color: @fbc;
      }
    }
  }

  & > div:nth-child(4) {
    width: 240px;
    height: 26px;
    display: flex;
    flex-direction: row;
    /*flex-wrap: wrap;*/
    justify-content: space-between;
    align-items: center;

    & > div:nth-child(1) {
      svg {
        .icon-min(21px, @fbc)
      }
    }

    & > div:nth-child(2) {
      transform: rotateY(180deg);

      svg {
        .icon-min(38px)
      }
    }

    & > div:nth-child(3) {
      svg {
        .icon-min(50px)
      }
    }

    & > div:nth-child(4) {
      svg {
        .icon-min(38px)
      }
    }

    & > div:nth-child(5) {
      svg {
        .icon-min(22px, @fbc)
      }
    }

  }


}
</style>
